<template>
	<div class="login">
		<div class="login-title drag">登录</div>
		<div class="login-form">
			<el-form :model="formParams" label-width="70px" aria-label="size control">
				<el-form-item label="用户名">
					<el-input v-model="formParams.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" :style="{ marginBottom: isRegister ? '16px' : 0 }">
					<el-input v-model="formParams.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" :style="{ marginBottom: isRegister ? '16px' : 0 }" v-if="isRegister">
					<el-input v-model="formParams.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="手机号" v-if="isRegister" style="marginBottom: 0">
					<el-input v-model="formParams.phone" placeholder="请输入验证码"></el-input>
				</el-form-item>
				<div class="label" @click="handleBtn('change')">{{ isRegister ? '返回登录' : '注册' }}</div>
				<el-form-item>
					<el-button type="primary" @click="handleLogin" style="width: 100%">
						{{ isRegister ? '注册' : '登录' }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<WinBtn></WinBtn>
</template>

<script lang="ts" setup>
import WinBtn from '../components/WinBtn.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const isRegister = ref(false);
const formParams = reactive({
	username: 'admin',
	password: '123456',
	phone: '13566666666'
});

/**
 * 统一处理按钮事件
 * @param type 按钮类型
*/
const handleBtn = (type: string) => {
	switch (type) {
		case 'change': // 登录注册切换
			isRegister.value = !isRegister.value;
			window.ipcRenderer.invoke('changeLogin', isRegister.value);
			break;
		default:
			break;
	}
};

/**
 * 登录
*/
const handleLogin = () => {
	router.push('/main');
	const screenWidth = window.screen.width;
	const screenHeight = window.screen.height;
	const userInfo = {
		...formParams,
		token: '123456',
		userId: 22
	}
	window.ipcRenderer.invoke('loginSuccess', {
		screenWidth,
		screenHeight,
		userInfo,
	})
	window.ipcRenderer.invoke('setData', { key: 'userInfo', value: { ...userInfo } });
	window.ipcRenderer.invoke('setData', { key: 'age', value: 1000 })
};
</script>

<style lang="scss" scoped>
.login {
	border-radius: 10px;
	height: 100%;

	&-title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		height: var(--header-height);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&-form {
		padding: 20px;
		height: calc(100% - 50px);

		.label {
			color: #409eff;
			padding: 8px 0;
			cursor: pointer;
			text-align: right;
		}
	}
}
</style>
